import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import { Form, Button, Input } from 'antd'
import ContentBox from 'components/contentBox'
import PropTypes from 'prop-types'
import Style from './infrastructure.css'

class infrastructure extends Component {
  static propTypes = {
    infrastructure: PropTypes.func,
    getInfrastructureDetail: PropTypes.func,
    infrastructureDetail: PropTypes.object
  }
  constructor (props) {
    super(props)
    this.state = {}
  }

  componentDidMount () {
    this.getDetail()
  }

  getDetail = () => {
    this.props.getInfrastructureDetail()
  }

  handleSubmit = e => {
    e.preventDefault()
    // 提交
    const { form, infrastructure } = this.props
    form.validateFields((err, values) => {
      if (!err) {
        infrastructure({
          ...values
        }).then(() => {
          this.getDetail()
        })
      }
    })
  }

  render () {
    const { form, infrastructureDetail = {} } = this.props
    const { autoCloseHours = 48, autoCompleteDay = 15 } = infrastructureDetail
    const { getFieldDecorator } = form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    }
    return (
      <>
        <ContentBox>
          <div className={Style['container']}>
            <Form {...formItemLayout} onSubmit={this.handleSubmit}>
              <Form.Item label='正常订单超过'>
                <div className={Style['custom-form-wrap']}>
                  {getFieldDecorator('autoCloseHours', {
                    rules: [{ required: true, message: '请输入' }],
                    initialValue: autoCloseHours
                  })(
                    <Input
                      style={{ width: 250 }}
                      type='number'
                      addonAfter='小时'
                    />
                  )}
                  <span>未付款，订单自动关闭</span>
                </div>

              </Form.Item>
              <Form.Item label='发货超过'>
                <div className={Style['custom-form-wrap']}>
                  {getFieldDecorator('autoCompleteDay', {
                    rules: [{ required: true, message: '请输入' }],
                    initialValue: autoCompleteDay
                  })(
                    <Input
                      style={{ width: 250 }}
                      type='number'

                      addonAfter='天'
                    />
                  )}
                  <span>未收货，订单自动完成</span>
                </div>
              </Form.Item>
              <Form.Item wrapperCol={{
                xs: { span: 24, offset: 0 },
                sm: { span: 16, offset: 8 }
              }}>
                <Button type='primary' htmlType='submit'>提交</Button>
              </Form.Item>
            </Form>
          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  infrastructureDetail: state.order.infrastructureDetail
})
const mapDispatch = dispatch => ({
  login: dispatch.common.createLogin,
  infrastructure: dispatch.order.infrastructure,
  getInfrastructureDetail: dispatch.order.getInfrastructureDetail
})
const Forminfrastructure = Form.create()(infrastructure)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(Forminfrastructure)
)
